<template>
    <!-- 放宽中页面 -->
    <div class="loaning">
        <div class="loaningTop">
            <img src="@/assets/SmartsVay.png" alt="">
        </div>
        <div class="contentWapper">
            <div class="loaningContent">
                <img src="@/assets/shouqian.png" alt="" class="loaningIcon">
                <p class="loanMoneyTitle">
                    Số tiền vay ước tính(₫)
                </p>
                <p class="loanMoney">{{ loanMoney.toLocaleString() }}</p>
                <p class="waitTip">
                    Hãy kiên nhẫn chờ đợi khoản vay của bạn
                </p>
            </div>
            <PlatformAdvantage />
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import PlatformAdvantage from '@/components/PlatformAdvantage.vue'
import { useRouter } from 'vue-router';
import { useOverAllStore } from '@/stores/overAll';
import { getItem } from '@/utils/token-utils';

const router = useRouter()
let overAllStore = useOverAllStore()

let loanMoney = ref((Number(router.currentRoute.value.query.amountResOfConfirm)))

onMounted(() => {
    if (!overAllStore.homeScreensData.scienFlag) {
        // overAllStore.getHomeScreenStoreHandler({
        //     uuid: getItem('uuid'),
        //     token: getItem('token')
        // })
        router.replace({
            path: '/home'
        })
    }
})
</script>

<style lang="less" scoped>
.loaning {
    height: 100%;
    background-color: #F7F7FA;
    display: flex;
    flex-direction: column;

    .loaningTop {
        width: 100%;
        min-height: 2.3rem;
        display: flex;
        justify-content: center;
        align-items: center;


        &>img {
            display: block;
            width: 7rem;
        }
    }


    .contentWapper {
        // flex: .9;
        height: calc(100% - 2.3rem - 2.75rem);
        overflow: scroll;
        padding-bottom: 1rem;

        .loaningContent {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            &>.loaningIcon {
                display: block;
                width: 7rem;
                height: 7rem;
                margin-top: 1.6rem;
                margin-bottom: 1rem;
            }

            .loanMoneyTitle {
                // font-family: SF Pro, SF Pro;
                font-weight: 600;
                font-size: .8rem;
                color: #292B33;
                line-height: 1.2rem;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }

            .loanMoney {
                // font-family: DIN Alternate, DIN Alternate;
                font-weight: bold;
                font-size: 2rem;
                color: #009959;
                line-height: 2.4rem;
                text-align: center;
                font-style: normal;
                text-transform: none;
                margin: .6rem 0;
            }

            .waitTip {
                // font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: 14px;
                color: #626673;
                line-height: 22px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }
    }

}
</style>